<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>后台管理</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.4.1.min.js"></script>
    <!-- 加载jsRender-->
    <script src="js/jsrender.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jsrender.min.js" type="text/javascript" charset="UTF-8"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js" type="text/javascript" charset="UTF-8"></script>
    <script src="js/md5.js" type="text/javascript" charset="UTF-8"></script>
    <style>
        body {
            background-color: #eee;
        }

        .row {
            padding: 20px;
            margin-bottom: 10px;
        }

        .panel-default>.panel-heading, .panel-warning>.panel-heading,
        .panel-danger>.panel-heading {
            background-color: white;
            font-weight: bold;
        }

        .row>.panel {
            background-color: white;
            box-shadow: 1px 1px 3px #0f0f0f, -1px -1px 3px #0f0f0f;
        }

        .row {
            background-color: rgba(255, 255, 255, .5);
        }

        .panel-default>.count-top {
            font-size: 14px;
            color: rgba(77, 77, 77, .5);
        }

        .panel-default>.count {
            font-size: 30px;
            margin-left: 20px;
            font-weight: bolder;
            text-align: center;
        }

    </style>
</head>
<body>
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <img alt="Brand" src="./images/M.svg" width="25" height="25">
                </a>
            </div>
            <div class="collapse navbar-collapse"  id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="./index.html">首页</a></li>
                    <li><a href="./user.html">用户管理</a></li>
                    <li><a href="#">产品管理</a></li>
                    <li><a href="#">留言管理</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                            <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                            <span id="show-uname" class="text-info" style="margin-left: 5px;">Admin</span>
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="">
                                    <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
                                    <span class="text-info" style="margin-left: 5px;">修改密码</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="glyphicon glyphicon-log-out" aria-hidden="true"></span>
                                    <span class="text-info" style="margin-left: 5px;">管理员退出</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div id="prodiv"class="">
            <div id="pro" class="active progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%; height: 10px;">
            </div>
        </div>
    </nav>

    <div class="container">
            <div id="body"></div>
    </div>
    <!-- template-->
    <script id="testTmpl" type="text/x-jsrender">
                <div class="row">
                    <div class="col-md-3 panel panel-default well">
                        <div class="count-top panel-heading">
                            <span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>
                            <span>注册用户总数</span>
                        </div>
                        <div class="panel-body count text-primary">{{:userCount}}</div>
                    </div>
                    <div class="col-md-4 panel panel-default col-md-offset-1 well">
                        <div class="count-top panel-heading">
                            <span class="glyphicon glyphicon-signal" aria-hidden="true"></span>
                            <span>上架商品总数</span>
                        </div>
                        <div class="panel-body count text-danger">{{:productCount}}</div>
                    </div>
                    <div class="col-md-3 panel panel-default col-md-offset-1 well">
                        <div class="count-top panel-heading">
                            <span class="glyphicon glyphicon-hdd" aria-hidden="true"></span>
                            <span>用户留言总数</span>
                        </div>
                        <div class="panel-body count text-success">{{:productNoteCount}}</div>
                    </div>
                </div>
            <div class="row">
                <div class="col-md-5 panel panel-danger well">
                    <div class="panel-heading">
                        <span class="glyphicon glyphicon-fire" aria-hidden="true"></span>
                        <span>
                            今日商品概况
                            <span class="badge">{{:productCount}}</span>
                        </span>
                    </div>
                    <div class="panel-body">
                        <table class="table">
                            <tr>
                                <th>商品id</th>
                                <th>商品名</th>
                                <th>销量</th>
                            </tr>
                            {{for productList}}
                            <tr>
                                <th>{{:pid}}</th>
                                <th>{{:pname}}</th>
                                <th>{{:sales}}</th>
                            </tr>
                            {{/for}}
                        </table>
                        <nav aria-label="Page navigation" class="text-center">
                            <ul class="pagination">
                                <li>
                                    <a href="#" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li>
                                    <a href="#" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
                <div class="col-md-6 col-md-offset-1 panel panel-warning well">
                    <div class="panel-heading">
                        <span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>
                        <span>今日用户概况
                            <span class="badge">{{:userCount}}</span>
                        </span>
                    </div>
                    <div class="panel-body">
                        <table class="table">
                            <tr>
                                <th>用户id</th>
                                <th>用户名</th>
                                <th>时间</th>
                            </tr>
                            {{for userList}}
                            <tr>
                                <th>{{:uid}}</th>
                                <th>{{:username}}</th>
                                <th>{{:~format(modifytime)}}</th>
                            </tr>
                            {{/for}}
                        </table>
                        <nav aria-label="Page navigation" class="text-center">
                            <ul class="pagination">
                                <li>
                                    <a href="#" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li>
                                    <a href="#" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </script>
    <script>
        Date.prototype.format = function(fmt) {
            // 对Date的扩展，将 Date 转化为指定格式的String
            // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
            // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
            // 例子：
            // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
            // (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
            var o = {
                "M+" : this.getMonth()+1,                 //月份
                "d+" : this.getDate(),                    //日
                "h+" : this.getHours(),                   //小时
                "m+" : this.getMinutes(),                 //分
                "s+" : this.getSeconds(),                 //秒
                "q+" : Math.floor((this.getMonth()+3)/3), //季度
                "S"  : this.getMilliseconds()             //毫秒
            };
            if(/(y+)/.test(fmt)) {
                fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
            }
            for(var k in o) {
                if(new RegExp("("+ k +")").test(fmt)){
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
                }
            }
            return fmt;
        };
        var returnDateFormat = function (value) {
            var result = new Date(value).format("hh:mm:ss");
            return result;
        }
        var datas = {};
        var htmlOutput;
        var template = $.templates("#testTmpl");
        $.get("http://localhost:8080/ycumall/api/admin.do?method=getUserInfo", function (data) {
            $("#show-uname").html(data.data.username);
            console.log(data.data.username);
        });
        $(document).ajaxStart(function () {
            $("#pro").animate({width:"70%"}, "fast");
        });
        $(document).ajaxSuccess(function () {
            $.views.helpers({
                format: returnDateFormat,
                md: hex_md5
            });
            htmlOutput = template.render(datas);
            $("#pro").animate({width:"100%"}, "fast");
            $("#prodiv").fadeOut();
            $("#body").html(htmlOutput);
        });
        $.get("http://localhost:8080/ycumall/api/admin.do?method=getHome",
            function(data) {
                datas = data;
            });
    </script>
</body>
</html>